var that
class Tab {
  constructor(id) {
    // 初始化时将 this 赋值给 that 方便后续使用
    that = this
    // 对象初始化
    // 将所有需要的元素获取到
    this.tab = document.querySelector(id)

    // 获取添加按钮
    this.addBtn = this.tab.querySelector('.tabadd')

    // 获取 ul
    this.ul = this.tab.querySelector('.firstnav > ul')

    // 获取 div
    this.tabScon = this.tab.querySelector('.tabscon')

    // 构造函数中尽量不要做赋值以外的操作
    this.init()

  }

  init() {
    // 根据 tab 获取其中的子元素 (标签页/内容盒子)
    this.lis = this.tab.querySelectorAll('.firstnav ul > li')

    // console.log(this.lis)
    // 根据 tab 获取所有的 section
    this.sections = this.tab.querySelectorAll('.tabscon section')
    // console.log(this.sections)

    // 1. 获取所有的删除按钮
    this.deletes = this.tab.querySelectorAll('.icon-guanbi')

    // 获取所有 `li` 中的第一个 `span`

    for (var i = 0; i < this.lis.length; i++) {
      // 切换功能
      // 1. 循环遍历给所有的 `li` 添加一个索引属性
      this.lis[i].index = i
      // 2. 给所有的 `li` 绑定点击事件
      this.lis[i].onclick = this.toggleTab
      // 2. 给所有的删除按钮绑定点击事件
      this.deletes[i].onclick = this.deleteTab
      // 获取到了span
      // 绑定双击事件
      this.lis[i].children[0].ondblclick = this.editTab
    }

    //  1. 获取按钮并绑定点击事件
    this.addBtn.onclick = this.addTab

  }

  /**
   * 1. 循环遍历给所有的 `li` 添加一个索引属性
     2. 给所有的 `li` 绑定点击事件
     3. 根据当前被点击的 `li` 索引获取到对应的 `section`
     4. 使用排他思想实现样式切换
   */
  toggleTab() {
    // this -> 当前被点击的 li
    // 3. 根据当前被点击的 `li` 索引获取到对应的 `section`
    var section = that.sections[this.index]
    // 4. 使用排他思想实现样式切换
    // for (var i = 0; i < that.lis.length; i++) {
    //   that.lis[i].className = ''
    //   that.sections[i].className = ''
    // }
    that.clearClassName()

    this.className = 'liactive'
    section.className = 'conactive'
  }

  clearClassName() {
    // 因为该方法由 tab 对象调用
    // that 或 this 都可以
    for (var i = 0; i < that.lis.length; i++) {
      that.lis[i].className = ''
      that.sections[i].className = ''
    }
  }

  /**
   * 1. 获取按钮并绑定点击事件
     2. 创建 `li` 元素，添加至 `ul`
     3. 创建 `section` 元素，添加至 `div`
     */
  addTab() {
    // 5. 在添加新的li之前,进行排他
    that.clearClassName()

    var random = parseInt(Math.random() * 100)
    console.log(random)
    // 2. 创建 `li` 元素，添加至 `ul`
    // this -> 添加按钮
    var liHTML = `<li class="liactive"><span>测试${random}</span><span class="iconfont icon-guanbi"></span></li>`
    that.ul.insertAdjacentHTML('beforeend', liHTML)

    // 3. 创建 `section` 元素，添加至 `div`
    var sectionHTML = `<section class="conactive">测试${random}</section>`
    that.tabScon.insertAdjacentHTML('beforeend', sectionHTML)

    // 4. 在添加完 Tab 页后，重新获取所有的 `li` 和 `section` 并绑定点击事件
    that.init()


  }

  /**
   * 1. 获取所有的删除按钮
     2. 给所有的删除按钮绑定点击事件
     3. 根据删除按钮找到当前 `li` 及其索引
     4. 根据索引找到对应的 `section`
     5. 删除 `li` 和 `section`
   */
  deleteTab(e) {
    // 阻止冒泡
    e.stopPropagation()
    // console.log('我被点了')
    // 3. 根据删除按钮找到当前 `li` 及其索引
    // this -> 被点击的删除按钮
    // console.log(this.parentNode.index)
    // li 的索引
    var index = this.parentNode.index
    // 删除 li
    this.parentNode.remove()
    // 删除对应的 section
    that.sections[index].remove()

    // 删完之后立即更新 lis 和 sections
    that.init()

    if (document.querySelector('.liactive')) return

    // 删除时获取索引，自减一，并找到对应的 `li` 触发点击事件
    index--

    // 判断自减一后是否还能获取到li, 如果获取不到, 则需要调转方向 自加一
    if (!that.lis[index]) index++

    that.lis[index] && that.lis[index].click()
  }

  /**
   * 1. 获取所有 `li` 中的第一个 `span`
     2. 绑定双击事件
     3. 创建一个 `input` 文本框替换 `span` 中的内容
     4. 将 `span` 中的内容设置给 `input`
     5. 给 `input` 绑定失去焦点事件
     6. 将用户输入的内容设置给 `span`
   */
  editTab() {
    // this -> 被双击的span
    //  3. 创建一个 `input` 文本框替换 `span` 中的内容
    //  4. 将 `span` 中的内容设置给 `input`
    this.innerHTML = `<input type="text" value="${this.innerHTML}" />`
    // 默认选中所有文字
    this.children[0].select()
    //  5. 给 `input` 绑定失去焦点事件
    this.children[0].onblur = function() {
      // this -> input
      //  6. 将用户输入的内容设置给 `span`
      this.parentNode.innerHTML = this.value
    }
  }
}

new Tab('#tab')